<template>
    <div class="config-manage-form">
        <avue-form ref="form" v-model="dirtyObj" :option="option" @reset-change="resetChange" @submit="submitSave">
            <template slot-scope="scope" slot="dirtyName">
                <el-input v-model="dirtyObj.dirtyName" type="hidden"></el-input>
                <div>
                    <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                        @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                    </el-input>

                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
                </div>
            </template>
        </avue-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                currentUrl: 'dirty',
                dirtyObj: {},
                sizeValue: 'mini',
                dynamicTags: [],
                inputVisible: false,
                inputValue: ''
            }
        },
        computed: {
            option() {
                return {
                    size: this.sizeValue,
                    submitSize: this.sizeValue,
                    submitText: '保存',
                    printBtn: true,
                    labelWidth: 120,
                    column: [{
                            label: "脏过滤词",
                            span: 24,
                            prop: "dirtyName",
                            formslot: true,
                            rules: [{
                                required: true,
                                message: "脏过滤词不能为空",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "允许脏问题次数",
                            prop: "dirtyTimes",
                            type: 'number',
                            span: 24,
                            precision: 0,
                            minRows: 1,
                            maxRows: 100,
                            row: true,
                        }
                    ]
                }
            }
        },
        mounted() {
            this.systemConfigGetting()
        },
        methods: {
            systemConfigGetting() {
                const _this = this
                const params = {}
                _this.axios.post(_this.$API.ZHIHUAPI.systemConfigGetting + "/" + _this.currentUrl, _this.qs.stringify(
                    params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.dirtyObj = res.data
                            _this.dynamicTags = _this.dirtyObj.dirtyName.split(',')
                        } else {
                            _this.dirtyObj = {}
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.dirtyObj = {}
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.dirtyObj = {}
                })
            },
            resetChange() {
                this.systemConfigGetting()
            },
            submitSave() {
                const _this = this
                const params = _this.dirtyObj
                _this.axios.post(_this.$API.ZHIHUAPI.systemConfigSetting + "/" + _this.currentUrl, _this.qs.stringify(
                    params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'success'
                        })
                        _this.systemConfigGetting()
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })

                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                })
            },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
                this.dirtyObj.dirtyName = this.dynamicTags.join(',')
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                    this.dirtyObj.dirtyName = this.dynamicTags.join(',')
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        }
    }
</script>
<style scoped>
    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
